<title>附件列表</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>内容管理</cite></a>
        <a><cite>附件列表</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="keywords" placeholder="请输入关键词" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit lay-filter="LAY-content-attachment-search"> <i class="layui-icon layui-icon-search"></i> </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-content-attachment-manage" lay-filter="LAY-content-attachment-manage"></table>
            <script type="text/html" id="LAY-content-attachment-toolbar">
                <div class="layui-btn-container">
                    {{# if (AppGeneral.userCan('content.kv.destroy')) { }}
                    <btton class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deletes"><i class="layui-icon layui-icon-delete"></i> </btton>
                    {{# } }}
                    {{# if (AppGeneral.userCan('content.kv.recycle')) { }}
                    <btton class="layui-btn layui-btn-sm layui-btn-normal" lay-event="recycle">回收站</btton>
                    {{# } }}
                </div>
            </script>
            <script type="text/html" id="LAY-content-attachment-tool">
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-sm" lay-event="show">查看</a>
                    <a class="layui-btn layui-btn-sm layui-btn-normal table-copy" data-clipboard-text="{{ d.path }}" lay-event="copy">复制</a>
                </div>
            </script>
        </div>
    </div>
</div>

<script src="./admin/js/clipboard.min.js"></script>
<script>
    layui.use(['admin', 'baseMethods'], function () {
        const {table,layer,form,flow,baseMethods} = layui,tableId = 'LAY-content-attachment-manage';
        const tableIns = baseMethods.table({
            elem: '#'+tableId,
            url: '/content/attachment/list',
            toolbar: '#LAY-content-attachment-toolbar',
            cols: [[
                {checkbox: true,fixed: true},
                {field: 'file_name', title: '文件名'},
                {field: 'type', title: '展示', width: 120,
                    templet: function (d) {
                        if (d.type.indexOf("image") !== -1) {
                            return `<img lay-src="${AppGeneral.storage(d.path)}" alt="${d.file_name}" width="28" height="28" onerror="AppGeneral.imgError(this)">`
                        }
                        return `<img src="./admin/img/ico/${d.suffix}.png" width="28" height="28" onerror="AppGeneral.imgError(this)">`;
                    }
                },
                {field: 'size', title: '文件大小', width: 130, templet: function (d) { return AppGeneral.fileSize(d.size); }},
                {field: 'storage', title: '储存方式', width: 120},
                {field: 'created_at', title: '添加时间', width: 180},
                {fixed: 'right', width: 150, align:'center', templet: '#LAY-content-attachment-tool'}
            ]],
            done: function () {
                flow.lazyimg();
            }
        });
        const tableTools = {
            deletes: function () {
                let hasCheck = table.checkStatus(tableId), hasCheckData = hasCheck.data;
                if (hasCheckData.length > 0) {
                    let ids = hasCheckData.map(item => item.id);
                    baseMethods.toolOpera(`确认删除选中的 ${hasCheckData.length} 项吗？`, {
                        url: '/content/attachment/destroy',
                        type: "delete",
                        data: {ids},
                        success: function () {
                            tableIns.reloadData();
                        }
                    })
                    return true;
                }
                layer.msg('请选择操作项', {icon: 5});
            },
            recycle: function () {},
            show: function (obj) {
                let data = obj.data;
                if (!data.path) return false;
                if(data.type.indexOf("video") !== -1) {
                    layer.open({
                        type: 2,
                        title: false,
                        area: ['530px', '360px'],
                        shade: 0.8,
                        closeBtn: 0,
                        shadeClose: true,
                        content: AppGeneral.storage(data.path)
                    })
                }else if (data.type.indexOf("image") !== -1) {
                    layer.photos({
                        area: ['530px', '360px'],
                        photos: { title: "查看", data: [{ src: AppGeneral.storage(data.path) }] },
                        shade: .01,
                        closeBtn: 1,
                        anim: 5
                    })
                }
            },
            copy: function () {
                let clipboard = new ClipboardJS('.table-copy');
                clipboard.on('success', function(e) {
                    clipboard.destroy();
                    e.clearSelection();
                    layer.msg('复制成功');
                });
            }
        };
        table.on('toolbar('+tableId+')', function(obj) {
            tableTools[obj.event] && tableTools[obj.event].call(this);
        });
        table.on('tool('+tableId+')', function (obj) {
            tableTools[obj.event] && tableTools[obj.event].call(this, obj);
        });
        form.on('submit(LAY-content-attachment-search)', function(data){
            tableIns.reloadData({
                where: data.field,
                page: {curr:1}
            })
        });
    });
</script>
